<template>
  <div class="layerMap_drawUtil">
    <div>
      <h3>
        <div class="exampleMap">
          <Map ref="map" />
        </div>
      </h3>
      <h3>
        <Button type="primary" @click="addDrawUtilLayer">添加绘制工具图层</Button>
        <Button type="primary" @click="removeDrawUtilLayer">删除绘制工具图层</Button>
      </h3>
      <h3>
        <Button type="primary" @click="addPointDraw">绘制点(Poing)</Button>
        <Button type="primary" @click="addLineStringDraw">绘制线(LineString)</Button>
        <Button type="primary" @click="addPolygonDraw">绘制多边形(Polygon)</Button>
        <Button type="primary" @click="addCircleDraw">绘制圆形(Circle)</Button>
        <Button type="primary" @click="addSquareDraw">绘制任意矩形(Square)</Button>
        <Button type="primary" @click="addBoxDraw">绘制矩形(Box)</Button>
      </h3>
      <h3>
        <Button type="primary" @click="editDraw">修改绘制图形</Button>
        <Button type="primary" @click="deleteDraw">删除选中图形</Button>
        <Button type="primary" @click="deleteAllDraw">删除所有图形</Button>
        <Button type="primary" @click="removeDrawUtil">清除绘制或修改状态</Button>
        <Button type="primary" @click="getDrawLayerGeoJson">获取整个图形图层的GeoJson</Button>
      </h3>

      <code class="code">
        <!-- script -->
        <div>
          <div class="code-tag">
            <<span>script</span>>
          </div>

          <!-- import 和 export default -->
          <div>
            <div class="code-indent2">
              <span class="code-orange">import</span>
              { Maps, Utils }
              <span class="code-orange">from</span>
              <span class="code-green">'src/base/Gykj_map'</span>
            </div>
            <div class="code-emptyLine"></div>
            <div class="code-indent2">
              <span class="code-orange">export default</span>
              {
            </div>
          </div>

          <!-- data -->
          <div>
            <div class="code-indent4">
              data () {
            </div>
            <div class="code-indent6">
              <span class="code-purpleRed">return</span> {
            </div>
            <div class="code-indent8">
              layers: {}
            </div>
            <div class="code-indent6">}</div>

            <div class="code-indent4">},</div>
          </div>

          <!-- methods -->
          <div>
            <div class="code-indent4">
              methods: {
            </div>

            <div class="code-indent6">
              addDrawUtilLayer () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 增加绘制工具图层</span>
            </div>
            <div class="code-indent8">
              <span class="comment">// 注意：一个地图只能添加一层绘制工具图层，否则会报错</span>
            </div>
            <div class="code-indent8">
              <span class="code-default">const</span> res =
              <span class="code-green">Maps</span>['drawUtilLayer']({
            </div>

            <div class="code-indent10">
              layerOptions: {
            </div>
            <div class="code-indent12">
              typeStyle: {
              <span class="comment">// 选传，设置绘制图形颜色，任意矩形和矩形均属于多边形，所以它们的样式设置使用 Polygon 类型</span>
            </div>
            <div class="code-indent14">
              PointRadius: 7,
              <span class="comment">// 类型：点(Point)，半径</span>
            </div>
            <div class="code-indent14">
              PointFillColor: 'black',
              <span class="comment">// 类型：点(Point)，填充颜色</span>
            </div>
            <div class="code-indent14">
              LineStringStrokeColor: 'green',
              <span class="comment">// 类型：线条(LineString)，填充颜色</span>
            </div>
            <div class="code-indent14">
              LineStringStrokeWidth: 10,
              <span class="comment">// 类型：线条(LineString)，线条粗度</span>
            </div>
            <div class="code-indent14">
              PolygonStrokeColor: 'blue',
              <span class="comment">// 类型：多边形(Polygon)，边框线条颜色</span>
            </div>
            <div class="code-indent14">
              PolygonStrokeWidth: 3,
              <span class="comment">// 类型：多边形(Polygon)，边框线条粗度</span>
            </div>
            <div class="code-indent14">
              PolygonStrokeLineDash: [0],
              <span class="comment">// 类型：多边形(Polygon)，边框虚线密度（0为实线）</span>
            </div>
            <div class="code-indent14">
              PolygonFillColor: 'rgba(0, 0, 255, 0.1)',
              <span class="comment">// 类型：多边形(Polygon)，填充颜色</span>
            </div>

            <div class="code-indent14">
              CircleStrokeColor: 'blue',
              <span class="comment">// 类型：圆形(Circle)，边框线条颜色</span>
            </div>
            <div class="code-indent14">
              CircleStrokeWidth: 3,
              <span class="comment">// 类型：圆形(Circle)，边框线条粗度</span>
            </div>
            <div class="code-indent14">
              CircleStrokeLineDash: [0],
              <span class="comment">// 类型：圆形(Circle)，边框虚线密度（0为实线）</span>
            </div>
            <div class="code-indent14">
              CircleFillColor: 'rgba(0, 0, 255, 0.1)'
              <span class="comment">// 类型：圆形(Circle)，填充颜色</span>
            </div>

              <div class="code-indent12">
              },
            </div>

            <div class="code-indent12">
              onDrawStart: (res) => {
            </div>
            <div class="code-indent14">
              <span class="comment">// 当绘制图形开始时触发</span>
            </div>
            <div class="code-indent14">
              <span class="code-orange">console</span>.log(res)
            </div>
            <div class="code-indent12">},</div>

            <div class="code-indent12">
              onDrawEnd: (res) => {
            </div>
            <div class="code-indent14">
              <span class="comment">// 当绘制图形结束时触发</span>
            </div>
            <div class="code-indent14">
              <span class="code-orange">console</span>.log(res)
            </div>
            <div class="code-indent12">},</div>

            <div class="code-indent12">
              onModifySelect: (res) => {
            </div>
            <div class="code-indent14">
              <span class="comment">// 当修改图形选中图形时触发</span>
            </div>
            <div class="code-indent14">
              <span class="code-orange">console</span>.log(res)
            </div>
            <div class="code-indent12">},</div>

            <div class="code-indent12">
              onModifySelectChange: (res) => {
            </div>
            <div class="code-indent14">
              <span class="comment">// 当修改图形选中图形后，图形发生变化时触发</span>
            </div>
            <div class="code-indent14">
              <span class="code-orange">console</span>.log(res)
            </div>
            <div class="code-indent12">}</div>

            <div class="code-indent10">
              }
            </div>
            <div class="code-indent8">
              })
            </div>

            <div class="code-emptyLine"></div>

            <div class="code-indent8">
              <span class="code-orange">this</span>.$set(<span class="code-orange">this</span>.layers, 'drawUtilLayer', res)
            </div>

            <div class="code-indent8">
              <span class="code-orange">this</span>.Map.addLayer(<span class="code-orange">this</span>.layers['drawUtilLayer'].layer)
            </div>

            <div class="code-indent6">},</div>

            <div class="code-indent6">
              removeDrawUtilLayer () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 删除绘制工具图层</span>
            </div>

            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['drawUtilLayer'].removeDrawUtil()
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.Map.removeLayer(<span class="code-orange">this</span>.layers['drawUtilLayer'].layer)
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.$delete(<span class="code-orange">this</span>.layers, 'drawUtilLayer')
            </div>

            <div class="code-indent6">},</div>

            <div class="code-indent6">
              addPointDraw () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 绘制点</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['drawUtilLayer'].addDraw({ type: 'Point' })
            </div>
            <div class="code-indent6">},</div>

            <div class="code-indent6">
              addLineStringDraw () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 绘制线</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['drawUtilLayer'].addDraw({ type: 'LineString' })
            </div>
            <div class="code-indent6">},</div>

            <div class="code-indent6">
              addPolygonDraw () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 绘制多边形</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['drawUtilLayer'].addDraw({ type: 'Polygon' })
            </div>
            <div class="code-indent6">},</div>

            <div class="code-indent6">
              addCircleDraw () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 绘制圆形</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['drawUtilLayer'].addDraw({ type: 'Circle' })
            </div>
            <div class="code-indent6">},</div>

            <div class="code-indent6">
              addSquareDraw () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 绘制任意矩形</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['drawUtilLayer'].addDraw({ type: 'Square' })
            </div>
            <div class="code-indent6">},</div>

            <div class="code-indent6">
              addBoxDraw () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 绘制矩形</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['drawUtilLayer'].addDraw({ type: 'Box' })
            </div>
            <div class="code-indent6">},</div>

            <div class="code-indent6">
              editDraw () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 修改绘制图形</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['drawUtilLayer'].editDraw()
            </div>
            <div class="code-indent6">},</div>

            <div class="code-indent6">
              deleteDraw () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 删除选中图形</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['drawUtilLayer'].deleteDraw()
            </div>
            <div class="code-indent6">},</div>

            <div class="code-indent6">
              deleteAllDraw () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 删除所有图形</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['drawUtilLayer'].deleteAllDraw()
            </div>
            <div class="code-indent6">},</div>

            <div class="code-indent6">
              removeDrawUtil () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 清除绘制或修改状态</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.layers['drawUtilLayer'].removeDrawUtil()
            </div>
            <div class="code-indent6">},</div>

            <div class="code-indent6">
              getDrawLayerGeoJson () {
            </div>
            <div class="code-indent8">
              <span class="comment">// 获取整个图形图层的GeoJson</span>
            </div>
            <div class="code-indent8">
              <span class="code-default">const</span> res =
              <span class="code-orange">this</span>.layers['drawUtilLayer'].getDrawLayerGeoJson()
            </div>
            <div class="code-indent8">
              <span class="code-orange">console</span>.log(res)
            </div>
            <div class="code-indent6">}</div>

            <div class="code-indent4">}</div>
          </div>

          <!-- export default 的 } -->
          <div class="code-indent2">}</div>

          <!-- /script -->
          <div class="code-tag">
            </<span>script</span>>
          </div>
        </div>

      </code>
    </div>
  </div>
</template>

<script>
import { Components } from 'base/Gykj_map'

export default {
  components: {
    Map: Components.initMap
  },
  mounted () {
    setTimeout(() => {
      this.layers = this.$refs['map'].getLayers()
    }, 20)
  },
  data () {
    return {
      layers: {}
    }
  },
  methods: {
    addDrawUtilLayer () {
      this.$refs['map'].addLayer({
        layerName: 'drawUtilLayer',
        layerOptions: {
          onDrawStart: (res) => {
            // 当绘制图形开始时触发
            console.log(res)
          },
          onDrawEnd: (res) => {
            // 当绘制图形结束时触发
            console.log(res)
          },
          onModifySelect: (res) => {
            // 当修改图形选中图形时触发
            console.log(res)
          },
          onModifySelectChange: (res) => {
            // 当修改图形选中图形后，图形发生变化时触发
            console.log(res)
          }
        }
      })
    },
    removeDrawUtilLayer () {
      this.$refs['map'].removeLayer({ layerName: 'drawUtilLayer' })
    },
    addPointDraw (type) {
      this.$refs['map'].addDraw({ type: 'Point' })
    },
    addLineStringDraw (type) {
      this.$refs['map'].addDraw({ type: 'LineString' })
    },
    addPolygonDraw (type) {
      this.$refs['map'].addDraw({ type: 'Polygon' })
    },
    addCircleDraw (type) {
      this.$refs['map'].addDraw({ type: 'Circle' })
    },
    addSquareDraw (type) {
      this.$refs['map'].addDraw({ type: 'Square' })
    },
    addBoxDraw (type) {
      this.$refs['map'].addDraw({ type: 'Box' })
    },
    editDraw () {
      this.$refs['map'].editDraw()
    },
    deleteDraw () {
      this.$refs['map'].deleteDraw()
    },
    deleteAllDraw () {
      this.$refs['map'].deleteAllDraw()
    },
    removeDrawUtil () {
      this.$refs['map'].removeDrawUtil()
    },
    getDrawLayerGeoJson () {
      const geoJson = this.$refs['map'].getDrawLayerGeoJson()
      console.log(geoJson)
    }
  }
}
</script>

<style lang="scss" scoped>
  .layerMap_drawUtil {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
  }
</style>
